<template>
  <view class="address-page">
    <view class="address-info">
      <up-form labelPosition="left" labelWidth="150rpx" :model="addressList" :rules="rules" ref="form1">
        <view class="info-list">
          <up-form-item label="收货人" prop="name" borderBottom ref="item1">
            <up-input v-model="addressList.name" border="none" placeholder="请填写收货人姓名" clearable></up-input>
          </up-form-item>
        </view>
        <view class="info-list">
          <up-form-item label="联系电话" prop="phone" borderBottom ref="item1">
            <up-input type="number" v-model="addressList.phone" maxlength="11" border="none" placeholder="请填写收货人手机号"
              clearable></up-input>
          </up-form-item>
        </view>
        <view class="info-list">
          <up-form-item label="所在地区" prop="area" borderBottom ref="item1">
            <up-input v-model="addressList.area" border="none" placeholder="省市区县、乡镇等">
              <template #suffix>
                <view class="positioning">
                  <image src="@/static/icon/user/positioning.png" mode=""></image>
                  定位
                </view>
              </template>
            </up-input>
          </up-form-item>
        </view>
        <view class="info-list">
          <up-form-item label="详细地址" prop="address" borderBottom ref="item1">
            <up-input v-model="addressList.address" border="none" placeholder="街道、楼牌号等" clearable></up-input>
          </up-form-item>
        </view>
      </up-form>
    </view>
    <view class="address-label">
      <view class="label-tag">
        <view class="label-title">标签</view>
        <view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
          <up-tag :text="item.name" :plain="!item.checked" :color="!item.checked?'#333333':'#FFFFFF'"
            :bgColor="!item.checked?'#fff':'#FF416C'" shape="circle"
            :borderColor="!item.checked?'#F2F2F2':'transparent'" :name="index" @click="radioClick">
          </up-tag>
        </view>
      </view>
      <view class="label-set">
        <view class="set-title">
          <view>设置默认地址</view>
          <view class="title-text">每次下单会默认推荐使用该地址</view>
        </view>
        <up-switch v-model="switchShow" activeColor="#FF416C" @change="switchChange"></up-switch>
      </view>
    </view>
    <view class="address-btn">
      <up-button :text="formType == 'add' ? '确认' :'确认修改'" shape="circle" color="#FF416C"></up-button>
      <up-button text="删除地址" shape="circle" color="#FF416C" plain v-if="formType !== 'add'"></up-button>
    </view>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  const formType = ref('')
  const addressList = reactive({
    name: "",
    phone: "",
    area: "",
    address: ""
  })
  const rules = reactive({
    name: [{
      required: true,
      message: '请填写收货人姓名',
      trigger: ['blur', 'change'],
    }],
    phone: [{
      required: true,
      message: '请填写收货人手机号',
      trigger: ['blur', 'change'],
    }],
    area: [{
      required: true,
      message: '请填写所在地区',
      trigger: ['blur', 'change'],
    }],
    address: [{
      required: true,
      message: '请填写详细地址',
      trigger: ['blur', 'change'],
    }]
  })
  const radios = reactive([{
      checked: false,
      name: "学校"
    },
    {
      checked: false,
      name: "家"
    },
    {
      checked: false,
      name: "公司"
    },
    {
      checked: false,
      name: "父母家"
    }
  ])
  const switchShow = ref(false)
  onLoad((e) => {
    if (e && e.type) {
      const title = e.type === 'add' ? '新增收货地址' : '编辑收货地址'
      formType.value = e.type
      uni.setNavigationBarTitle({
        title: title
      })
    }
  })

  function switchChange(e) {
    switchShow.value = e
  }

  function radioClick(name) {
    radios.forEach((item, index) => {
      item.checked = item.checked && index === name ? false : index === name
      // if (item.checked && index === name) {
      //   console.log(item, 333)
      //   item.checked = false;
      // } else {
      //   item.checked = index === name;
      // }
    });
  }
</script>

<style lang="less" scoped>
  .address-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 0 24rpx;

    .address-info {
      width: 100%;
      opacity: 1;
      border-radius: 24rpx;
      background: #FFFFFF;
      margin-top: 32rpx;
      box-sizing: border-box;
      padding: 0 32rpx;

      .info-list {
        height: 110rpx;
        border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
        font-size: 30rpx;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        display: flex;

        /deep/ .u-form-item {
          flex: 1;
        }

        .positioning {
          display: flex;
          align-items: center;

          image {
            height: 32rpx;
            width: 32rpx;
            margin-right: 4rpx;
          }
        }
      }

      .info-list:last-child {
        height: 152rpx;
        border: none;
      }
    }

    .address-label {
      width: 100%;
      height: 272rpx;
      border-radius: 24rpx;
      background: #FFFFFF;
      margin-top: 20rpx;
      box-sizing: border-box;
      padding: 0 32rpx;
      display: flex;
      flex-direction: column;

      .label-tag {
        height: 110rpx;
        display: flex;
        align-items: center;
        border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

        .label-title {
          margin-right: 20rpx;
        }

        /deep/ .u-tag-wrapper {
          width: 120rpx;
          margin-left: 16rpx;
        }

        /deep/ .u-tag {
          justify-content: center;
        }
      }

      .label-set {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .set-title {
          font-size: 30rpx;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          display: flex;
          flex-direction: column;

          .title-text {
            font-size: 26rpx;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            margin-top: 12rpx;
          }
        }
      }
    }

    .address-btn {
      width: 100%;
      margin-top: 12rpx;

      /deep/ .u-button {
        margin-top: 20rpx;
      }
    }
  }
</style>